<template>
  <div class="admin-login">
    <!--<el-menu  class="elMenu el-menu-demo" mode="horizontal" background-color="#021126" text-color="#14ddaa">
          <span class="elMenuText" >企业ERP、CMS、CRM、OA多功能融合SpringCloud微服务系统</span>
      </el-menu>-->
    <el-container>
      <el-main>
        <!--居中布局固定：type=flex justify=center align=middle-->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          class="mainBody row-bg"
        >
          <el-col class="siteDesc">
            <div class="grid-content bg-purple">
              <div class="descTitle">
                <div class="desc-logo"></div>
                <div class="desc-com">新盛合环保设备</div>
              </div>
              <div class="descTitleBody">
                <div class="desc-author">cevent author</div>
                <div class="desc-line">
                  <el-divider content-position="right"
                    >www.xinshenghe999.com</el-divider
                  >
                </div>
                <div class="desc-intro">
                  <p>
                    新盛合环保设备有限公司：主要从事玻璃钢制品设计、开发、生产制造，主要产品有:
                    玻璃钢冷却塔、玻璃钢化粪池、玻璃钢管道、玻璃钢电缆管、标志桩、警示牌、净化塔、格栅、拉挤型材、风机等。
                  </p>
                  <p>
                    以产品合格率达到100%为宗旨，愿同广大朋友携手并进，共创辉煌。
                  </p>
                </div>
              </div>
              <!--新盛合环保设备-->
              <div class="desc">新盛合环保设备有限公司一站式微服务管理平台</div>
            </div>
          </el-col>
          <el-col class="loginForm">
            <div class="loginFormBG grid-content bg-purple-light">
              <div class="loginTitle">
                <div class="titleText">管理员登录</div>
                <div class="titleTextSub">Administrator Login</div>
              </div>
              <el-form
                :model="inputForm"
                :rules="inputRules"
                ref="formRef"
                class="loginFormContent"
                :hide-required-asterisk="true"
              >
                <el-form-item prop="loginName">
                  <el-input
                    class="loginInput"
                    placeholder="请输入您的登录名"
                    v-model="inputForm.loginName"
                  >
                    <template #prefix>
                      <el-icon class="el-input__icon"><user /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    class="loginInput"
                    show-password
                    placeholder="请输入您的密码"
                    v-model="inputForm.password"
                  >
                    <template #prefix>
                      <el-icon class="el-input__icon"><lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="imgCode">
                  <el-input
                    class="loginInput"
                    placeholder="请输入验证码"
                    v-model="inputForm.imgCode"
                  >
                    <template #prefix>
                      <el-icon class="el-input__icon"><Key /></el-icon>
                    </template>
                    <template #append
                      ><el-image
                        :src="kaptchaCode"
                        @click="loadKaptcha"
                        id="kaptchaCode"
                        alt="验证码"
                    /></template>
                  </el-input>

                  <!--<el-image></el-image>-->
                </el-form-item>

                <el-form-item>
                  <div class="flexBetween">
                    <el-checkbox
                      class="rememberBox"
                      v-model="remember"
                      label="记住账号·密码"
                      border
                    ></el-checkbox>
                    <el-button :loading="loading"
                      class="loginBtn"
                      type="primary"
                      @click="saveValidate()"
                      >登录</el-button
                    >
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
//onMounted:页面渲染完执行的函数
//onBeforeUnmount: 页面卸载之前执行的函数
import { ref, reactive, getCurrentInstance,onMounted,onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

import api from "@/api/login/index";

const router = useRouter();
const store = useStore();
const proxy=getCurrentInstance().proxy;

const inputForm = reactive({
  loginName: "",
  password: "",
  imgCode: "",
});

const imgCodeToken = ref("");
const md5 = ref("");
const loading = ref(false);
const kaptchaCode = ref("");
const remember = ref(false);

//表单别名响应式
const formRef = ref(null);
const inputRules = {
  loginName: [
    { required: true, message: "登录名不能为空", trigger: "blur" },
    { min: 3, message: "登录名长度在3位以上", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, message: "密码长度在6位以上", trigger: "blur" },
  ],
  imgCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 4, message: "验证码长度在4位以上", trigger: "blur" },
  ],
};
//表单校验
function saveValidate() {
  formRef.value.validate((valid) => {
    console.log("valid: ", valid);
    if (valid) {
      save();
    } else {
      return false;
    }
  });
}
//登录接口
function save() {
  let md5 = hex_md5(inputForm.password + KEY);
  /* let rememberEmp = LocalStorage.get(EMP_LOGIN_LOCAL) || {};
  if (md5 !== rememberEmp.md5) {
    //请求盐值加密
    inputForm.password = hex_md5(inputForm.password + KEY);
  } */

  let reqData = { ...inputForm };
  reqData.imgCodeToken = imgCodeToken.value;
  reqData.password = hex_md5(inputForm.password + KEY);
  reqData.md5 = hex_md5(inputForm.password + KEY);

  loading.value=true
  api.login(reqData)
    .then(async (res) => {
      console.log("res: ", res);
      if (res && !res.responseMsg) {
        proxy.$messageInfo.success("登录成功")
        proxy.$cookies.setToken(res.token)
        store.commit("setUserInfo", res)
        
        router.push("/");
      }else{
        loadKaptcha()
      }
      
    }).finally(()=>{
      loading.value=false
    })

}

//获取验证码
const loadKaptcha = () => {
  imgCodeToken.value = Tool.get8UUID(8);
  api.getCaptcha(imgCodeToken.value)
    .then(async (res) => {
      console.log("验证码res: ", res);
      const buffer = await res;
      let blob = new Blob([buffer]);
      //将验证码图片显示到页面
      kaptchaCode.value = URL.createObjectURL(blob);
      console.log("kaptchaCode: ", kaptchaCode);
    })
};

//鼠标回车事件
function onKeyUp(e){
  console.log("e: ", e);
  if(e.keyCode==13){
    saveValidate()
  }
}

//---------------------------load接口------------------------
onMounted(()=>{
  //默认请求
  loadKaptcha();
  //键盘按键监听
  document.addEventListener("keyup", onKeyUp)
})

onBeforeUnmount(()=>{
  //移出键盘监听
  document.removeEventListener("keyup", onKeyUp)
})

</script>

<style lang="scss" scoped>
.header-title {
  color: steelblue;
  font-weight: bolder;
  text-shadow: 0px 1px 0px #ffffff, 0px 2px 0px #e2d6d6, 0px 3px 0px #e2d6d6,
    0px 4px 0px #e2d6d6, 0px 7px 0px #fff3cd, 0px 8px 7px #ffffff;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
}
.admin-login {
  position: relative;
}

/*body*/
.mainBody {
  position: relative;
  text-align: left;
  line-height: normal;
  background-image: url("/imgs/ym_bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: auto;
}

.el-col {
  border-radius: 4px;
}

/*left*/
.siteDesc {
  background-color: #367cf4;
  /*background-color: rgba(244,67,54,.95);*/
  background-image: url("/imgs/ym-bg-2.png");
  min-width: 450px;
  max-width: 600px;
}

.descTitle {
  position: relative;
  float: left;
  width: 100%;
  padding: 20px 35px;
}

.desc-logo {
  float: left;
  background-image: url("/imgs/logo-1.png");
  /*background-image: url("../../public/imgs/logo-1tx.png");*/
  background-position: center;
  background-color: white;
  border-radius: 10px;
  background-size: 90px;
  width: 90px;
  height: 90px;
  margin-right: 20px;
}

.desc-com {
  font-size: 36px;
  line-height: 90px;
  color: white;
}

/*left-body*/
.descTitleBody {
  position: relative;
  float: left;
  width: 100%;
  padding: 20px 35px;
}

.desc-author {
  font-size: 20px;
  color: white;
  margin-bottom: 30px;
}

.desc-intro {
  font-size: 18px;
  color: white;
  text-indent: 2rem;
}

.desc-line {
  position: relative;
}

.desc {
  position: relative;
  float: left;
  width: 100%;
  padding: 20px 35px;
  color: white;
}

/*right*/
.loginForm {
  /*background-color: #f0f1f5;*/
  background-color: rgba(240, 241, 245, 0.6);
  min-width: 400px;
  max-width: 500px;
  position: relative;
  float: left;
  width: 100%;
  height: 490px;
  padding: 20px 35px;
}
.loginFormBG {
}
.loginTitle {
  padding: 20px 30px;
}
.titleText {
  float: left;
  color: #535252;
  font-size: 30px;
  margin-left: 30px;
  margin-right: 20px;
  line-height: 40px;
}
.titleTextSub {
  color: #5f3131;
  line-height: 50px;
}

.loginFormContent {
  padding: 20px 30px;
}
.inputTag {
  margin-top: 5px;
  color: #409eff;
}
.rememberBox {
  @apply px-5 py-5 !important;
}
.loginBtn {
  float: right;
  width: 200px;
  @apply px-5 py-4.9 !important;
}
.loginInput {
  ::v-deep .el-input__wrapper {
    padding: 10px 15px !important;
  }
  ::v-deep .el-input-group__append {
    font-size: 16px;
    min-width: 100px;
    padding: unset;
  }
  ::v-deep .el-input__inner {
    font-size: 16px;
  }
}
</style>
